<template>
  <el-config-provider :locale="locale">
    <div class="app-container">
      <!-- 固定高度60px的Header -->
      <Header class="header" />
      
      <!-- 内容区域 - 占据剩余高度 -->
      <div class="content-wrapper">
        <Aside class="aside" />
        <div class="main-content">
          <router-view />
        </div>
      </div>
    </div>
  </el-config-provider>
</template>

<style>
/* 全局样式重置 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* 确保根元素高度正确 */
html, body, #app {
  height: 100%;
  overflow: hidden; /* 禁止根元素滚动 */
}

/* 应用容器 */
.app-container {
  height: 100%;
  display: flex;
  flex-direction: column;
}

/* 头部样式 - 固定60px高度 */
.header {
  height: 60px;
  flex-shrink: 0; /* 防止被压缩 */
}

/* 内容区域容器 */
.content-wrapper {
  display: flex;
  flex: 1; /* 占据剩余全部高度 */
  overflow: hidden; /* 防止内容溢出到容器外 */
}

/* 侧边栏 */
.aside {
  flex-shrink: 0; /* 保持侧边栏宽度 */
}

/* 主内容区域 */
.main-content {
  flex: 1;
  overflow-y: auto; /* 仅在内容超出时显示滚动条 */
  max-height: calc(100vh - 60px); /* 精确计算最大高度 */
}

/* 移除滚动条但保留滚动功能（可选） */
.main-content::-webkit-scrollbar {
  display: none;
}
</style>

<script>
import Header from "@/components/Header"
import Aside from "../components/Aside.vue"
import { ElConfigProvider } from 'element-plus'
import zhCn from 'element-plus/es/locale/lang/zh-cn'

export default {
  name: "Layout",
  components: {
    Header,
    Aside,
    [ElConfigProvider.name]: ElConfigProvider
  },
  data(){
    return {
      locale: zhCn,
    }
  }
}
</script>
